<template>
  <div>
    <div v-for="(item, index) in head_type_list" :key="index"
         class="flex flex-a"
         :class="is_table?'':'card-content-3 padding-10'"
         :style="index != head_type_list.length-1 ? 'border-bottom: 1px solid rgba(0,0,0,0.04);' : ''">
      <div class="flex flex-a">
        <svg-icon v-if="item.img" class="f-s-16" style="margin-left: 4px;color: #1966E2;" :icon-class="item.img"/>
        <div class="f-s-16" style="color: #1966E2;margin-left: 4px;">{{ item.text }}</div>
      </div>
      <div class="flex-1">
        <div v-if="!text.length" style="height: 40px;width: 100%;"></div>
        <div v-for="(item_text, index_text) in text" :key="index_text" class="">
          <div class="content-box"
               v-if="((diary_type === 'week' || diary_type === 'month_compare') && item_text.recordClass == index+1) || (diary_type === 'month' && item_text.recordClass == index)">
            <div class="flex flex-1 p-a-20 l-h-15" :class="item_text.is_eit?'input-enter':'b-tran'" @mousedown.prevent >
              <div :style="!item_text.is_eit?valTop(font_size):''"
                   :class="!item_text.is_eit?'content-bit-eit':'content-bit'" style="flex-shrink: 0">
                {{ item_text.orderNumber }}
              </div>

              <div style="margin-left: 10px;" class="flex-1 flex">
                <!--
                autoFocus 添加新的时自动获得焦点 判断逻辑是 `内容为空` && `租后一个元素`
                @blur 当失去焦点时触发
                @user-change 当输入框里被艾特的人变化时触发 得到一个数组
                 -->
                <RichText v-model="item_text.htmlText" ref="RichText"
                          :isEdit="personal_eit && (diary_type !== 'month' || index !== 0)" :userList="userList"
                          :isAit="isAit" style="min-width: 20px;"
                          :class="contentFont(font_size, font_family)"
                          :autoFocus="!item_text.content && index_text === text.length -1"
                          @click.native="handleChangeEit(index,index_text)"
                          @blur="richTextBlur($event, item_text, index_text)"/>
                <el-tooltip v-if="is_fu && item_text.fileList && item_text.fileList.length && !item.is_eit" class="" effect="light" :content="item_text.fileList[0].fileName" placement="bottom">
                  <div  @click.stop="handleDown(item_text,index_text)" style="margin-left: 4px;cursor: pointer">
                    <svg-icon class="f-s-16" style="margin-left: 4px" icon-class="appraisefujin"/>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <div class="add-box cursor-p" v-if="personal_eit && is_add_content && (diary_type !== 'month' || index !== 0)" @click="handleAddMyDuty(index+1)">
          <i class="el-icon-circle-plus-outline"></i>
          <span class="add-text">添加</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import RichText from '../RichText'
import { syncRequest, fileUpload, fileDownload } from '@/utils/httpRequet'

const calcRatio = str => {
  let num = Number(str)
  if (num > 100) num = 100
  if (num < 0) num = 0
  num = Math.floor(num)
  return num
}
export default {
  name: 'RecordEdit',
  components: {
    RichText
  },
  props: {
    text: {
      type: Array,
      default: () => ([])
    },
    text_id: {
      type: String,
      default: ''
    },
    head_type_list: {
      type: Array,
      default: () => ([])
    },
    font_size: {
      type: Number,
      default: 1
    },
    font_family: {
      type: Number,
      default: 1
    },
    personal_eit: {
      type: Boolean,
      default: false
    }, //是否能编辑
    is_add_content: {
      type: Boolean,
      default: false
    }, //是否添加内容
    router_type: {
      type: String,
      default: ''
    }, //模块类型
    // 被艾特的候选人列表
    userList: {
      default: () => []
    },
    isAit: {
      type: Boolean,
      default: false
    },
    is_fu: {
      type: Boolean,
      default: false
    },//附件显隐
    diary_type: {
      type: String,
      default: ''
    },
    is_table: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      text_list: [],
      select_man: false,
      name: '',
      is_name: false,
      is_add_text: false,
      time_range: '',
    }
  },
  methods: {
    // 富文本失去焦点时
    richTextBlur(contentStr, item, index) {
      console.log(contentStr, item, index)
      // this.$set(this.text, index, { ...this.text[index],  content: contentStr })

      const operItem = { ...this.text[index], content: contentStr }

      this.handleEnd(operItem, index, 0)
    },
    /**
     * @name 编辑结束
     * @param index
     */
    handleEnd(item, index, type) {
      if (this.router_type === 'plan') {
        item.planId = this.text_id
      }
      if (type !== 0) {
        item.content = item.text
        let obj_content = {
          text: item.content,
          htmlText: item.htmlText,
          relateUserList: item.relateUserList
        }
        item.content = JSON.stringify(obj_content)
      }
      if(type !== 6 && item.fileList.length) {
        item.contentFileList = item.fileList[0].attachId
      }
      const { htmlText } = JSON.parse(item.content)
      console.log(JSON.parse(item.content))
      if (htmlText == '') {
        console.log(this.is_add_text)
        if (!this.is_add_text) {
          this.$emit('handleDeleteDuty', { item, index })
        }
        this.text.splice(index, 1)
        this.is_add_text = false
        return
      }
      if (this.is_add_text) {
        this.$emit('handleAddDuty', { item, index })
        this.is_add_text = false
      } else {
        this.$emit('handleEitContent', { item, index })
        this.text[index].eit_time = false
      }
      this.text[index].is_eit = false
    },
    /**
     * @name 编辑任务
     * @param index
     */
    handleChangeEit(index,index_text) {
      if (this.personal_eit &&(this.diary_type !== 'month' || index !== 0)) {
        this.text[index_text].is_eit = true
      }
    },
    //内容序号高度
    valTop(val) {
      const marginTop = {
        '0': 'margin-top: 8px;width:20px;height: 20px;',
        '1': 'margin-top: 6.4px;width:17px;height: 17px;',
        '2': 'margin-top: 4px;width:13px;height: 13px;'
      }
      return marginTop[val]
    },
    /**
     * @name 字体调整
     */
    contentFont(value, value2) {
      const fontSize = {
        '0': 'font-size-b', '1': 'font-size-m', '2': 'font-size-s'
      }
      const family = {
        '0': 'font-family-s', '1': 'font-family-y', '2': 'font-family-h'
      }
      return `${fontSize[value]} ${family[value2]}`
    },
    /**
     * @name 增加我的职责
     */
    handleAddMyDuty(index) {
      if (this.personal_eit) {
        if (this.router_type === 'plan') {
          if (!this.text.length) {
            this.$emit('addPlan')
          }
          this.text.push({
            content: '',
            is_eit: true,
            eit_time: false,
            endDate: this.formateDate(new Date()),
            progress: '0'
          })
        } else if(this.router_type === 'duty') {
          if (!this.text.length) {
            this.$emit('AddCurrentYearDuty')
          }
          this.text.push({
            content: '',
            is_eit: true
          })
        }else if(this.router_type === 'record') {
          const grade = this.diary_type === 'week'?String(index):String(index-1)
          let gradeNum = this.text.filter(res=> res.recordClass === grade).length + 1
          this.text.push({
            content: '',
            is_eit: true,
            eit_time: false,
            fileList: [],
            htmlText: '',
            recordWeekId: '',
            recordWeekSubId: '',
            orderNumber: gradeNum,
            recordClass: grade,
            relateUserList: []
          })
        }
        this.$nextTick(()=> {
          this.$refs.RichText[this.text.length - 1].focus()
        })
        this.is_add_text = true
      }
    },
    //时间转化
    formateDate(data) {
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      let day = data.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      return year + '-' + month + '-' + day
    },
    /**
     * @name 下载
     */
    handleDown(item, index) {
      fileDownload('fileDownload',{
        param:{ attachId: item.fileList[0].attachId }
      })
    },
  }
}
</script>

<style scoped>
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-a {
  display: flex;
  align-items: center;
}
::v-deep .el-progress {
  top: 5px;
}
.cursor-p {
  cursor: pointer;
}

.card-content-1 {
  margin-left: 30px;
}
.card-content-2 {
  margin-left: 4px;
}
.card-content-3 {
  margin-left: 27px;
}
.p-a-20 {
  padding: 0.5rem 1rem;
}

.input-enter {
  border: 1px solid #1966E2;
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.55rem 0 #D5E4FF;
}

.b-tran {
  border: 1px solid transparent;
  border-radius: 0.2rem;
}

.content-box {
  display: flex;
  justify-content: space-between;
}

>>> .el-textarea__inner {
  padding: 0 0.4rem;
  border: none;
  font-family: "Microsoft YaHei";
  font-size: 16px;

}
.el-icon-circle-plus-outline {
  font-size: 22px;
  border-radius: 0.2rem;
}
.padding-10 {
  padding: 10px 0
}
.content-bit {
  width: 17px;
  height: 17px;
  border-radius: 2px;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.2rem;
}

.content-bit-eit {
  border-radius: 2px;
  background-color: #AEB1B8;
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 0.1rem;
}
.color-ff {
  color: #FF000C !important;
}
.b-c-ff {
  background-color: #FF000C;
}
.color-fb {
  color: #FB7700 !important;
}
.b-c-fb {
  background-color: #FB7700;
}
.b-c-1a {
background-color: #1A66E2;
}
.border-ff {
  border: 1px dashed #FF000C;
}
.border-fb {
  border: 1px dashed #FB7700;
}
.border-1a {
  border: 1px dashed #1A66E2;
}
.bit {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bit-content {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.add-box {
  color: rgba(153, 153, 153, 1);
  width: 78px;
  margin-left: 2rem;
  padding-top: 11px;
  display: flex;
  align-items: center;
}

.add-box:hover {
  color: #c61111;
}

.add-text {
  margin-left: 4px;
  font-size: 16px;
}

.l-h-15 {
  line-height: 1.7;
}

.content-text-1 {
  flex: 1;
  font-size: 16px;
  margin-left: 7px;
}
.content-box >>> .el-input {
  width: 35.35rem;
}

.m-l-5 {
  margin-left: 5px;
}

.font-family-s {
  font-family: '宋体', Simsun;
}

.font-family-y {
  font-family: "Microsoft YaHei";
}

.font-family-h {
  font-family: "Hiragino Sans GB";
}

.font-size-b {
  font-size: 20px;
}

.font-size-m {
  font-size: 16px;
}

.font-size-s {
  font-size: 12px;
}
.relevant-text {
  width: 6rem;
  margin: 0 2.1rem;
  color: #1B64E2;
  font-size: 16px
}

.p-4-0-11-0 {
  padding: 4px 0 11px 0;
}

.p-4-0 {
  padding: 4px 0;
}


.f-s-16 {
  font-size: 16px;
}

.m-b-4 {
  margin-bottom: 4px;
}

.m-t-4 {
  margin-top: 4px;
}

.m-r-24 {
  margin-right: 24px;
}

@media (max-width: 1024px) {
  .f-s-16 {
    font-size: 14px;
  }
  .font-size-b {
    font-size: 18px;
  }
  .card-content-1 {
    margin-left: 34px;
  }
  .card-content-2 {
    margin-left: 12px;
  }
  .card-content-3 {
    margin-left: 29px;
  }
  .font-size-m {
    font-size: 14px;
  }

  .font-size-s {
    font-size: 12px;
  }
  .content-bit {
    width: 17px;
    height: 17px;
    border-radius: 2px;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0.5rem;
  }
}
</style>
